<template>
	<view class="detali">
		<!-- header -->
		<image class="detaliImg" :src="imgUrl" mode="aspectFit"></image>
		<view class="goodsAttribute">
			<view class="leftgoods">
				<view class="goodsInfo">
					<view class="title">
						品名：
					</view> {{name}}
				</view>
				<view class="goodsInfo">
					<view class="title">
						型号：
					</view> {{goodsinfo[0].xh}}
				</view>
				<view class="goodsInfo">
					<view class="title">
						板厚：
					</view> {{goodsinfo[0].bh}}mm
				</view>
				<view class="goodsInfo">
					<view class="title">
						类别：
					</view> {{goodsinfo[0].lb}}
				</view>


			</view>
			<view class="rightgoods">
				<view class="goodsInfo">
					<view class="title">
						尺寸：
					</view> {{goodsinfo[0].cc}}
				</view>
				<view class="goodsInfo">
					<view class="title">
						产地：
					</view> {{goodsinfo[0].cd}}
				</view>
				<view class="goodsInfo">
					<view class="title">
						反弹特性：
					</view> {{goodsinfo[0].fttx}}
				</view>
				<view class="goodsInfo">
					<view class="title">
						震动特性：
					</view> {{goodsinfo[0].zdtx}}
				</view>

			</view>
		</view>

		<view class="goodsnotice">
			详细介绍
		</view>
		<view class="recommend">
			<view class="Rtitle">
				{{goodsinfo[0].xxjs}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notice: "详细信息",
				name: "",
				goodsicon: "",
				goodsinfo: []
			}
		},
		methods: {

		},
		computed: {
			imgUrl() {
				return `http://localhost:8858/` + this.goodsicon
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.name)
			this.name = option.name;
			this.goodsicon = option.goodsicon;
			uni.setNavigationBarTitle({
				title: `${option.name}`
			});

			var obj = {
				name: this.name
			}
			const {
				data: res
			} = uni.$http.post('http://127.0.0.1:8858/detali/goods', obj).then((res) => {
				// console.log(res.data.data)
				this.goodsinfo = res.data.data
			})
		}
	}
</script>

<style scoped lang="scss">
	$goodsheight:75rpx;
	$fontSzie:36rpx;

	.goodsnotice {
		font-weight: bold;
		padding: 15rpx;
		height: 40rpx;
		background-color: #e9e9e9;
	}

	.rightgoods {
		width: 70%
	}

	.leftgoods {
		width: 100%
	}

	.detali {
		display: flex;
		flex-direction: column;

		.goodsAttribute {
			padding: 15rpx;
			// background-color: aqua;
			// height: 150rpx;
			display: flex;
			// flex-direction: column;
			justify-content: space-around;

			.goodsInfo {
				height: $goodsheight;
				// line-height: $goodsheight;
				font-size: 31rpx;
				color: black;

				.title {
					font-size: $fontSzie;
					display: inline-block;
				}
			}

		}


	}

	.detaliImg {
		background-color: #f6f6f6;
		width: 100%;
	}

	.recommend {
		padding: 15rpx;

		.Rtitle {
			height: $goodsheight;
			line-height: $goodsheight;
			font-size: $fontSzie +5rpx;
			color: black;
		}
	}
</style>
